<div class="file-upload-demo">

  <section>
    <h4>Basic:</h4>
    <hi-file-upload [multiple]="true" (removeFiles)="onRemoveDone($event)" uploadParamName="files"
                    [(uploadFiles)]="uploadFiles"
                    uploadUrl="http://localhost:3000/upload"></hi-file-upload>

    <pre>{{uploadFiles | json}}</pre>
  </section>

  <section>
    <h4>Image preview:</h4>
    <hi-file-upload [multiple]="true" [autoUpload]="true" [accept]="'image/*'" [imgPreview]="true"
                    [previewWidth]="'50px'" uploadParamName="files"
                    uploadUrl="http://localhost:3000/upload"></hi-file-upload>
  </section>

  <section>
    <h4>With customise toolbar:</h4>
    <hi-file-upload [autoUpload]="true" [accept]="'image/*'" uploadParamName="files" [multiple]="false"
                    [toolbarTemplate]="toolbarTemplate"
                    uploadUrl="http://localhost:3000/upload"></hi-file-upload>
    <ng-template #toolbarTemplate let-toolbar="">
      <button class="btn btn-primary" (click)="toolbar.addNewFile($event)"
              [disabled]="toolbar.isMoreThanMaxItems()">
        <i class="glyphicon glyphicon-plus"></i> {{toolbar.chooseButton}}
      </button>
    </ng-template>
  </section>


</div>
